<template>
  <div class="newsDetail">
    <div class="title">{{ articleInfo.title }}</div>
    <div class="list acea-row row-middle">
      <div class="label cart-color line1">{{ articleInfo.cart_name }}</div>
      <div class="item">
        <span class="iconfont icon-shenhezhong"></span
        >{{ articleInfo.add_time }}
      </div>
      <div class="item">
        <span class="iconfont icon-liulan"></span>{{ articleInfo.visit }}
      </div>
    </div>
    <div class="conter" v-html="articleInfo.content"></div>
  </div>
</template>
<style scoped>
.newsDetail{
  background: #fff;
}
</style>

<script>
import { getArticleDetails } from "@api/public";
export default {
  name: "NewsDetail",
  components: {},
  props: {},
  footer:false,
  data: function() {
    return {
      articleInfo: {
        title:"价值13.9亿的法式别墅庄园 车库大到能停40辆车",
        cart_name:"网易新闻",
        add_time:"2019-10-22 07:02:30",
        visit:"189",
        content:"你有没有憧憬过拥有一座充满法式风情的庄园，当司机载着你缓缓驶入庄园内时，两边是郁郁葱葱的林荫大道，溪涧里淙淙的流水让你感受到了前所未有的优雅，再往前，会经过私人游泳池，宽大的草坪，然后……然后……然后想象不出来了！对不起，是贫穷限制了我的想象！"
      }
    };
  },
  watch: {
    $route(to) {
      if (to.name === "NewsDetail") this.articleDetails();
    }
  },
  mounted: function() {
    this.articleDetails();
  },
  methods: {
    updateTitle() {
      document.title = this.articleInfo.title || this.$route.meta.title;
    },
    articleDetails: function() {
      let that = this,
        id = this.$route.params.id;
      getArticleDetails(id).then(res => {
        that.articleInfo = res.data;
        that.updateTitle();
      });
    }
  }
};
</script>
